<template>
  <div>
    <el-tree :data="data"  @node-click="handleNodeClick" @node-contextmenu="(e,data,node,comp) => handleMenu(e,data,node,comp)"></el-tree>
    <div style="display: none" ref="meun"  v-menu="menuData" data-type="rightmenu"></div>
  </div>
</template>
<script type="text/javascript">
// import directives from '../directives'
export default {
  components: {

  },
  // directives:directives,
  props: {
    value: [Array, Object]
  },

  data() {
    return {
      tmDisplay:false,

      menuData:{
        type:null,
        // 指令
        // 关键字为菜单项类型
        // 值为指令类型
        directives:{
          edit:'editPage',
        },
        // 显示菜单项，默认有打开(open)，编辑(edit)，删除(del)
        options:['open','edit','del'],
        // 菜单位置
        position:{
          top:0,
          left:0,
        },
        // 删除数据
        value:[],
        // 双向绑定数据
        data:[],
      },

      data:[],
    }
  },
  /**
   * 计算属性
   * @type {Object}
   */
  computed: {

  },


  /**
   * 数据监听
   * @type {Object}
   */
  watch: {
    value:{
      handler(val,old){
          this.data[0].children = Array.isArray(val.pages) ? val.pages : [];
          this.data[1].children = Array.isArray(val.components) ? val.components : [];
          this.data[2].children =  Array.isArray(val.models) ? val.models : [];
      },
      deep:true,
    }
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  mounted() {
    // this.getResources();
    // window.addEventListener('keyup',this.handleKeyup)
  },
  created(){
    this.data = [{
        label:"页面资源",
        type:'page',
        children:this.value.pages,
      },{
        label:"组件资源",
        type:'component',
        children:this.value.components,
      },{
        label:"模型资源",
        type:'model',
        // children:this.getTree(this.value.models),
        children:this.value.models,
      }]
      // console.log('2211',this.data);
  },
  /**
   * 页面方法
   * @type {Object}
   */
  methods: {
    //处理树结构
    // getTree(data){
    //   console.log('222',this.data);
    //   if(Array.isArray(data)){
    //      data.forEach(item =>{
    //         // item.label = item.title + "（"+ item.name +"）";
    //      })
    //      return data;
    //   }else{
    //     return false;
    //   }
    // },

    /**
     * 左键事件  隐藏菜单栏
     * @param  {[type]} data [description]
     * @return {[type]}      [description]
     */
    handleNodeClick(data) {
      this.$refs.meun.dispatchEvent(new MouseEvent('click')) 
    },


    //查找根节点类型
    findRoot(node){
      let type = null;
      let parent = node;
      for(let i = 1; i<node.level ; i++){
        parent = parent.parent
      }
      return parent.data.type;
    },

    /**
     * 右键事件
     * @return {[type]} [description]
     */
    handleMenu(e,data,node,comp){
      let type = this.findRoot(node);

      // 资源第一级不具备右键编辑功能
      if(node.level == 1){
        return false;
      }

      //只有资源文件，可以右键编辑
      if(type == 'page' && node.level < 3){
        return false;
      }

      // 配置资源管理右键菜单项
      switch(type){
        // 页面文件资源
        case 'page':
          // 菜单配置
          this.menuData.options = ['open','edit','del'];
          this.menuData.directives = {
            edit:'editPage',
          }
        break;
        // 组件文件资源
        case 'component':
          // 菜单配置
          this.menuData.options= ['open','edit','del'];
          this.menuData.directives = {
            edit:'editComponent',
          }
        break;
        // 模型文件资源
        case 'model':
          // 菜单配置
          this.menuData.options= ['edit','del'];
          this.menuData.directives = {
            edit:'editModel',
          }
        break;
      }

      this.menuData.type = type;
      // 通过指令调出指令菜单
      // 将右击事件添加到dom结构上
      this.menuData.position.top = e.pageY+'px';
      this.menuData.position.left = e.pageX+'px';
      // 选中的数据
      this.menuData.value = data;
      // 所有数据
      this.menuData.data = this.data;
      this.$refs.meun.dispatchEvent(new MouseEvent('contextmenu')) 

    },

  }
}

</script>
<style type="text/css" lang="scss">

</style>
